<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue跑酷游戏 - 测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: white;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            margin: 10px;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #45a049;
        }
        .status {
            margin: 20px 0;
            padding: 15px;
            border-radius: 8px;
            background: rgba(255,255,255,0.1);
        }
        .error {
            background: rgba(244, 67, 54, 0.2);
            border: 1px solid #f44336;
        }
        .success {
            background: rgba(76, 175, 80, 0.2);
            border: 1px solid #4caf50;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Vue跑酷游戏 - 诊断页面</h1>
        
        <div id="status" class="status">
            正在检测浏览器兼容性...
        </div>
        
        <div>
            <a href="http://localhost:5173" class="btn">访问游戏</a>
            <button onclick="runDiagnostics()" class="btn">运行诊断</button>
            <button onclick="location.reload()" class="btn">刷新页面</button>
        </div>
        
        <div id="details" style="margin-top: 30px; text-align: left; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 8px;">
            <h3>浏览器信息:</h3>
            <div id="browser-info"></div>
            
            <h3>功能支持:</h3>
            <div id="feature-support"></div>
            
            <h3>控制台日志:</h3>
            <div id="console-logs" style="background: #000; color: #0f0; padding: 10px; border-radius: 4px; font-family: monospace; max-height: 200px; overflow-y: auto;"></div>
        </div>
    </div>

    <script>
        // 捕获控制台日志
        const originalLog = console.log;
        const originalError = console.error;
        const logs = [];
        
        console.log = function(...args) {
            logs.push({type: 'log', message: args.join(' '), time: new Date().toLocaleTimeString()});
            originalLog.apply(console, args);
            updateConsoleLogs();
        };
        
        console.error = function(...args) {
            logs.push({type: 'error', message: args.join(' '), time: new Date().toLocaleTimeString()});
            originalError.apply(console, args);
            updateConsoleLogs();
        };
        
        function updateConsoleLogs() {
            const logsDiv = document.getElementById('console-logs');
            logsDiv.innerHTML = logs.slice(-10).map(log => 
                `<div style="color: ${log.type === 'error' ? '#f44' : '#0f0'}">[${log.time}] ${log.message}</div>`
            ).join('');
            logsDiv.scrollTop = logsDiv.scrollHeight;
        }
        
        function runDiagnostics() {
            const statusDiv = document.getElementById('status');
            const browserInfoDiv = document.getElementById('browser-info');
            const featureSupportDiv = document.getElementById('feature-support');
            
            try {
                // 浏览器信息
                const userAgent = navigator.userAgent;
                let browserName = 'Unknown';
                let browserVersion = 'Unknown';
                
                if (userAgent.includes('Chrome') && !userAgent.includes('Edg')) {
                    browserName = 'Chrome';
                    const match = userAgent.match(/Chrome\/(\d+)/);
                    browserVersion = match ? match[1] : 'Unknown';
                } else if (userAgent.includes('Firefox')) {
                    browserName = 'Firefox';
                    const match = userAgent.match(/Firefox\/(\d+)/);
                    browserVersion = match ? match[1] : 'Unknown';
                } else if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
                    browserName = 'Safari';
                    const match = userAgent.match(/Version\/(\d+)/);
                    browserVersion = match ? match[1] : 'Unknown';
                } else if (userAgent.includes('Edg')) {
                    browserName = 'Edge';
                    const match = userAgent.match(/Edg\/(\d+)/);
                    browserVersion = match ? match[1] : 'Unknown';
                }
                
                browserInfoDiv.innerHTML = `
                    <p><strong>浏览器:</strong> ${browserName} ${browserVersion}</p>
                    <p><strong>用户代理:</strong> ${userAgent}</p>
                    <p><strong>屏幕分辨率:</strong> ${screen.width}x${screen.height}</p>
                    <p><strong>视口大小:</strong> ${window.innerWidth}x${window.innerHeight}</p>
                `;
                
                // 功能支持检测
                const features = {
                    'Canvas 2D': testCanvas2D(),
                    'Web Audio': testWebAudio(),
                    'LocalStorage': testLocalStorage(),
                    'RequestAnimationFrame': !!window.requestAnimationFrame,
                    'CSS3 Animations': testCSS3Animations(),
                    'Touch Events': 'ontouchstart' in window,
                    'WebGL': testWebGL(),
                    'ES6': testES6(),
                    'Intersection Observer': 'IntersectionObserver' in window,
                    'Resize Observer': 'ResizeObserver' in window
                };
                
                const supportedCount = Object.values(features).filter(Boolean).length;
                const totalCount = Object.keys(features).length;
                
                featureSupportDiv.innerHTML = Object.entries(features).map(([name, supported]) => 
                    `<p><strong>${name}:</strong> <span style="color: ${supported ? '#4caf50' : '#f44'}">${supported ? '✓ 支持' : '✗ 不支持'}</span></p>`
                ).join('');
                
                // 更新状态
                const compatibilityLevel = supportedCount / totalCount;
                if (compatibilityLevel >= 0.9) {
                    statusDiv.className = 'status success';
                    statusDiv.innerHTML = `✓ 浏览器兼容性优秀 (${supportedCount}/${totalCount})`;
                } else if (compatibilityLevel >= 0.7) {
                    statusDiv.className = 'status';
                    statusDiv.innerHTML = `⚠ 浏览器兼容性良好 (${supportedCount}/${totalCount})`;
                } else {
                    statusDiv.className = 'status error';
                    statusDiv.innerHTML = `✗ 浏览器兼容性较差 (${supportedCount}/${totalCount})`;
                }
                
            } catch (error) {
                statusDiv.className = 'status error';
                statusDiv.innerHTML = `✗ 诊断失败: ${error.message}`;
                console.error('诊断失败:', error);
            }
        }
        
        // 测试函数
        function testCanvas2D() {
            try {
                const canvas = document.createElement('canvas');
                return !!(canvas.getContext && canvas.getContext('2d'));
            } catch {
                return false;
            }
        }
        
        function testWebAudio() {
            return !!(window.AudioContext || window.webkitAudioContext);
        }
        
        function testLocalStorage() {
            try {
                const test = '__test__';
                localStorage.setItem(test, test);
                localStorage.removeItem(test);
                return true;
            } catch {
                return false;
            }
        }
        
        function testCSS3Animations() {
            const element = document.createElement('div');
            const properties = ['animation', 'webkitAnimation', 'mozAnimation'];
            return properties.some(prop => prop in element.style);
        }
        
        function testWebGL() {
            try {
                const canvas = document.createElement('canvas');
                return !!(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
            } catch {
                return false;
            }
        }
        
        function testES6() {
            try {
                new Function('return (() => `ES6 supported`)()');
                return true;
            } catch {
                return false;
            }
        }
        
        // 自动运行诊断
        window.onload = function() {
            setTimeout(runDiagnostics, 500);
        };
    </script>
</body>
</html>